<template>
	<view class="login">
		<!-- <button			
		    @tap="wxlogin"
		>一键登录</button>
		<button 
			open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
		>一键登录</button> -->
		<view class="login-content">
			<view class="login-title">欢迎登录</view>
			<!--<uni-easyinput v-model="form.phone" :clearable="false" placeholder="请输入手机号">
				<template #left>
					<view>+86</view>
				</template>
			</uni-easyinput>
			<view class="input-box">
				<uni-easyinput v-model="form.phoneCode" placeholder="请输入验证码" :clearable="false"></uni-easyinput>
				<button type="primary" plain="true" size="mini" @tap="getPhoneCode">{{ btnText }}</button>
			</view>
			<button type="primary" @tap="login">登录</button>
			<view class="line">
				<text>或</text>
			</view> -->
			<button type="primary" @tap="wxlogin">微信一键登录</button>
			<button  @tap="getuserinfo">头像</button>
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			  <image class="avatar" :src="avatarUrl"></image>
			</button>
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content">
				<view class="text">为了您有更好的体验，请绑定手机号</view>
				<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键绑定手机号</button>
			</view>
			<!-- <uni-popup-dialog :showClose="false" :showConfirm="false">
				<view class="popup-content">
					<view>为了您有更好的体验，请绑定手机号</view>
					<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键绑定手机号</button>
				</view>
			</uni-popup-dialog> -->
		</uni-popup>		
	</view>
</template>

<script>
import http from '@/utils/http.js'
export default {
	data() {
		return {
		  title: 'Hello',
		  value: 1,
		  params: {},
		  form: {
			  phone: '',
			  phoneCode: ''
		  },
		  btnText: '获取验证码',
		  count: 60,
		  avatarUrl: ''
		}
	},
	onLoad() {},
	methods: {
		onChooseAvatar(e) {
		    const { avatarUrl } = e.detail 
		    this.avatarUrl = avatarUrl
		  },
		getuserinfo(e) {
			console.log(e)
			uni.login({
				provider: 'weixin', //使用微信登录
				success(lres) {
					console.log(lres, '请求微信登录返回的数据');
					wx.getUserProfile({
						desc: '用于完善会员资料',
						success(ures) {
							console.log(ures, '返回的用户信息');
							//这个地方的用户信息无论登录成功失败都可以拿到，只是拿到用户的信息
							//在成功的回调中去使用微信登录
							
						}
					});							
				}
			});			
		},
		getPhoneCode() {
			if (this.count !== 60) {
				return false
			}
			if (!this.form.phone) {
				uni.showToast({
				  title: "请输入手机号",
				  icon: "none",
				});
				return false
			}
			http({
				url: 'member/auth/send-sms-code',
				method: 'post',
				data: {
					phone: this.form.phone
				}
			}).then(res => {				
				if(res.code === 1) {
					this.setTime()
				}
			})
		},
		setTime() {
			this.timer && clearInterval(this.timer)
			this.btnText = `${ this.count }s`
			this.timer = setInterval(() => {
				if (this.count <= 0) {
					this.timer && clearInterval(this.timer)
					this.count = 60
					this.btnText = `获取验证码`
					return false
				}
				this.count--
				this.btnText = `${ this.count }s`
			}, 1000)
		},
		login() {
			if (!this.form.phone) {
				uni.showToast({
				  title: "请输入手机号",
				  icon: "none",
				});
				return false
			}
			if (!this.form.phoneCode) {
				uni.showToast({
				  title: "请输入手机验证码",
				  icon: "none",
				});
				return false
			}
			http({
				url: 'member/auth/sms-login',
				method: 'post',
				data: this.form
			}).then(res => {
				if(res.code === 1) {
					
				} 
			})
		},
		getPhoneNumber(e) {
			const {
			  detail: { encryptedData, iv, code },
			} = e;
			//这里需要使用自己封装的接口 loginByWechat
			http({
				url: 'member/auth/weixin-mini-app-login',
				method: 'post',
				data: {
					phoneCode: code,
					loginCode: this.params.code,
					state: 'mp'
				}
			}).then(res => {
				console.log(res, '微信一键登录返回的数据');
				/* 思路
				1.返回的数据可能是成功可能是失败
				2.失败的情况如果是 用户没有注册微信我们需要去执行其他操作
				3.把我们拿到的用户信息携带者去注册微信页面，注册成功后后端返回成功code码
				4.当code==200的时候也就是成功的时候
				5.成功但是一些属性为空，用户注册了微信但是没有绑定手机号应该跳转绑定手机号页面
				*/
				if (res.code === 0) {
					this.$refs.popup.close()
					uni.setStorageSync('token', res.data.accessToken);
					uni.setStorageSync('userId', res.data.userId)
					uni.reLaunch({
						url: '/pages/index/index'
					})
					//当前用户没有注册 每个后端设置的错误码不同，根据接口文档
					//这一步需要我们拿到用户的数据去注册 在data中声明一个对象存储用户数据
					// that.registerDate = {
					// 	unionId: res.data.unionId ? res.data.unionId : res.data.openid, //开放平台ID
					// 	openId: res.data,
					// 	openid,
					// 	sessionKey: res.data.sessionKey,
					// 	signature: ures.signature, //签名
					// 	rawData: ures.rawData, //原始数据
					// 	encryptedData: ures.encryptedData, //加密数据
					// 	iv: ures.iv //偏移量
					// }; //这里的数据基本都是这些，只不过可能变量名不一样
					// that.register(); //跳转注册页面
				}
				// //当前用户注册了
				// else if (red.code == '200') {
				// 	//判断注册了 有没有绑定手机号
				// 	that.mobile(res.data); //
				// 	//这个地方可以把下面的函数直接这里 我这里是方便以后修改所以当都封装一下
				// }
			});
		},
		wxlogin() {
			let that = this;
			//先获取用户的信息
			// uni.getUserProfile({
			// 	desc: '登录的数据',
			// 	success(ures) {
			// 		console.log(ures, '返回的用户信息');
			// 		//这个地方的用户信息无论登录成功失败都可以拿到，只是拿到用户的信息
			// 		//在成功的回调中去使用微信登录
			// 		uni.login({
			// 			provider: 'weixin', //使用微信登录
			// 			success(lres) {
			// 				console.log(lres, '请求微信登录返回的数据');
			// 				//我们要根据上面获取的code码去作为请求参数发送给后端
			// 				that.params = {
			// 					code: lres.code
			// 				};							
			// 			}
			// 		});
			// 	}
			// });
			uni.login({
				provider: 'weixin', //使用微信登录
				success(lres) {
					console.log(lres, '请求微信登录返回的数据');
					//我们要根据上面获取的code码去作为请求参数发送给后端
					that.params = {
						code: lres.code
					};	
					that.$refs.popup.open()
				}
			});
		},
	},
}
</script>

<style lang="scss" scoped>
.login {
	height: 100vh;
	padding: 0 48rpx;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	// justify-content: center;
	background: url('https://ywtmp.hnwytkj.com/static/images/login-bj.png');
	background-size: 100% 100%;
	.login-content {
		width: 100%;
		padding-top: 180rpx;
		.login-title {
			// font-size: 32rpx;
			// color: #000;
			font-size: 40rpx;
			color: #FFFFFF;
			margin-bottom: 64rpx;
		}
		.input-box {
			display: flex;
			align-items: center;
			margin: 32rpx 0;
			button {
				width: 102px;
				height: 35px;
				margin-left: 24rpx;
			}
		}
		.line {
			position: relative;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 64rpx 0;
			&::before {
				content: '';
				flex: 1;
				height: 2rpx;
				background-color: #ccc;
			}
			&::after {
				content: '';
				flex: 1;
				height: 2rpx;				
				background-color: #ccc;
			}
			text {
				padding: 0 30rpx;
			}
		}
	}	
}
.popup-content {
	text-align: center;
	width: 600rpx;
	height: 400rpx;	
	box-sizing: border-box;
	padding-top: 100rpx;
	.text {
		padding: 40rpx 0;
		font-size: 32rpx;
	}
	button {
		margin-top: 20rpx;
		width: 280rpx;
		font-size: 28rpx;
	}
}
</style>